<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>定格动画</title>
	<script src="js/jquery-3.3.1.min.js"></script>
	<script src="js/jquery.reel.js"></script>
    <style type="text/css">
        div {
            margin: 50px auto;
        }
    </style>
</head>
<body>
    <div>
        <!-- 赛车 -->
        <!-- <img src="img/f1.jpg" width="276" height="126"
        class="reel"
        id="image"
        data-image="img/f1-reel.jpg"
        data-cw="true"
        data-frames="35"
        data-cw="true"
        data-speed="-0.3"
        data-throwable="1.2"
        data-brake="0.2"> -->

        <img src="img-test/01.png" width="600" height="600" class="reel" id="image">
        <button onclick="imgtran()">transform</button>
    </div>
    <script type="text/javascript">
        $(function(){    
            //3D展示效果
            $('#image').reel({
                images: 'https://dev-wow.uum3d.com/uploads/posed_based/c108929b3efce1a04661364cfddd20ba/preview/##.png|01..30',
                cw: 'true',
            });
        });
        function imgtran(){
            $(function(){    
            //3D展示效果
            $('#image').reel({
                images: 'img/##.png|00..29',
                cw: 'true',
            });
        });
        }
    </script>
</body>
</html>